<template>
    <el-row>
    <el-col span="12">
   <el-card style="height:600px">
        <div slot="header" class="clearfix">
        <span>
          申请返校
        </span>
    </div>
    <div class="www">
         <el-row >
         <span>学号:</span>
         <el-input  v-model="xuehao"  style="width:250px"/>
         <span>姓名:</span>
         <el-input  v-model="name" style="width:250px"/>
      </el-row>
       </div>
       <div class="www" style="margin-top:15px">
         <el-row>
            <span>手机号码:</span>
         <el-input  v-model="phone" style="width:506px"/>
        
      
        
         </el-row>
       </div>
       <div class="www" style="margin-top:15px">
         <el-row>
          <span>专业:</span>
          <el-input  v-model="college"  style="width:140px"/>
          <span>班级:</span>
          <el-input  v-model="className" style="width:160px"/>
          <span>宿舍:</span>
          <el-input  v-model="dormitory" style="width:165px"/>
         </el-row>
       </div>
       <div class="www" style="margin-top:15px">
        <el-row>
         <span>当前位置:</span>
         <el-input  v-model="local"  style="width:506px"/>
        </el-row>
      </div>
      <div class="www" style="margin-top:15px">
         <el-row>
            <span>返校方式:</span>
         <el-input  v-model="way" style="width:310px"/>
            <span>是否到达高风险地区:</span>
            <el-input  v-model="situation" style="width:50px"/>
         </el-row>
      </div>
      
      <div class="www" style="margin-top:15px">
         <el-row>
            
            <span>健康状况:</span>
            <el-input  v-model="healthy" style="width:507px"/>
         </el-row>
      </div>
      <div class="www" style="margin-top:15px">
         <el-button type="primary" @click="onSubmit" style="width:280px">立即创建</el-button>
            <el-button @click="quxiao" style="width:286px">取消</el-button>
      </div>
</el-card>
</el-col>
<el-col span="12">
    <el-card style="height:600px">
        <div slot="header" class="clearfix">
        <span>
         健康码、行程码、核酸检测
        </span>
    </div>
    <div class="xxx">
    <el-upload 
    style="margin-left:30px"
  class="avatar-uploader"
  action="http://1.15.134.100:9999/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  >
  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-upload 
    style="margin-left:140px"
  class="avatar-uploader"
  action="http://1.15.134.100:9999/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess2"
  >
  <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<div class="xxx" style="margin-top:60px">
    <el-upload 
    style="margin-left:30px"
  class="avatar-uploader"
  action="http://1.15.134.100:9999/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess3"
  >
  <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-upload 
    style="margin-left:140px"
  class="avatar-uploader"
  action="http://1.15.134.100:9999/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess4"
  >
  <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</el-card>
</el-col>
</el-row>
</template>


<script>
  export default {
    data() {
      return {
        imageUrl1: '',
        imageUrl2: '',
        imageUrl3: '',
        imageUrl4: '',
        xuehao:'',
        name:'',
        phone:'',
        college:'',
        className:'',
        dormitory:'',
        local:'',
        way:'',
        situation:'',
        healthy:'',
        status:'待审核'






      };
    },
    methods: {
      handleAvatarSuccess(res) {
        this.imageUrl1 = res.msg;
      },
      handleAvatarSuccess2(res) {
        this.imageUrl2 = res.msg;
      },
      handleAvatarSuccess3(res) {
        this.imageUrl3 = res.msg;
      },
      handleAvatarSuccess4(res) {
        this.imageUrl4 = res.msg;
      },
      onSubmit(){
              
              fetch("http://1.15.134.100:9999/user/fanxiao",{
                 method:"POST",
                 headers: {
                      'Content-type': 'application/json',
                      
                      'token': localStorage.getItem('token'),
                  
                  },
                  body: JSON.stringify({
                    xuehao:this.xuehao,
                    name:this.name,
                    phone:this.phone,
                    dormitory:this.dormitory,
                    classname:this.className,
                    college:this.college,
                    local:this.local,
                    way:this.way,
                    situation:this.situation,
                    healthy:this.healthy,
                    jiankangma:this.imageUrl1,
                    xingchengka:this.imageUrl2,
                    hesuanzhengming:this.imageUrl3,
                    status:this.status
                   
                    
  
                    
                  })
              }).then(response => response.json())
                  .then(data => {
                      console.log(data);
                      alert("添加成功");
                 
                   this.$router.go(0);
  
                  });
  
              
           },
           quxiao(){
              this.$router.go(0);
           },
    }
  }
</script>

<style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 170px;
      height: 210px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .xxx{
        display: flex;
    }
  </style>